<template>
	<view class="main">
		<view class="head">
			<view v-if="status===0" class="sta_0">
				距离活动开始还有:<text class="txt">2天</text>
			</view>
			<view v-if="status===1" class="sta_1">
				活动进行中
			</view>
			<view v-if="status===2" class="sta_2">
				活动已结束
			</view>
			<view class="item">
				<view class="cover">
					<image src="../../static/image/1.jpg" mode="aspectFill"></image>
				</view>
				<view class="title">
					2024年科技成果交流春季系列活动之贵州科学城业界共治理事会“大数据行业委员会”成立大会暨行业科技创新交流会视觉方案
				</view>
				<view class="time">
					活动时间:2024年7月
				</view>
				<view class="num">
					活动人数:约120人
				</view>
				<view class="addr">
					活动地址:贵阳国家高新区
				</view>
			</view>
		</view>
		<view class="con">
			<view class="tab">
				<view class="label" @click="handleShowRule(false)">
					<view class="title">活动介绍</view>
					<view v-if="!showRules" class="line"></view>
				</view>
				<view class="label" @click="handleShowRule(true)">
					<view class="title">活动规则</view>
					<view v-if="showRules" class="line"></view>
				</view>
			</view>
			<view class="info">
				<view v-if="!showRules" class="words">
					<rich-text v-if="words" class="txt" :nodes="words"></rich-text>
					<view v-else class="txt">
						在某一个时期不知为何却发生了诸神大战导致诸神的陨落也使得山川地貌发生巨变曾经的沧海变成山岭高山成为天坑大河隐入地下即使是斗战胜佛:齐天大圣也经历了惨战而不知所踪只留下了这一处上古遗迹:大圣之眼
						<image src="../../static/image/1.jpg" mode="aspectFill"></image>
					</view>
				</view>
				<view v-else class="rules">
					<rich-text v-if="rules" class="txt" :nodes="rules"></rich-text>
					<view v-else class="txt">
						ASDF在某一个时期不知为何却发生了诸神大战导致诸神的陨落也使得山川地貌发生巨变曾经的沧海变成山岭高山成为天坑大河隐入地下即使是斗战胜佛:齐天大圣也经历了惨战而不知所踪只留下了这一处上古遗迹:大圣之眼
					</view>
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="box">
				<view class="btn_l" @click="handleShare">
					分享
				</view>
				<view class="btn_r" @click="navToActivityin">
					立即报名
				</view>
			</view>
		</view>
		<view v-if="showShare" class="share" :class="showShare?'share-in':'share-out'">
			<view class="title">
				分享至
			</view>
			<view class="btn">
				<view class="pic">
					<image src="https://honor-hall.oss-cn-chengdu.aliyuncs.com/02.png" mode="aspectFill"></image>
				</view>
				<view class="pic">
					<image src="https://honor-hall.oss-cn-chengdu.aliyuncs.com/01.png" mode="aspectFill"></image>
				</view>
			</view>
			
		</view>
		<view v-if="showShare" @click="handleClose" :class="showShare?'mask':''">
			
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { getUrlParamsInH5, getUrlParamsInWeixin, rpx2px, wxSetUpShareFunction } from "../../utils/utils";
import { onShow } from '@dcloudio/uni-app';
// import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
// const { proxy } = getCurrentInstance();

const status = ref(0)
const words = ref('')
const rules = ref('')
const showRules = ref(false)
const showShare = ref(false)
const handleShowRule = (flag) => {
	showRules.value = flag
}
const handleClose = () => {
	showShare.value = false
}
const handleShare = () => {
	showShare.value = true
}
const navToActivityin = () => {
	uni.navigateTo({
		url:'./activity/activity-in'
	})
}

</script>

<style lang="less" scoped>
.main{
	height: 100vh;
	// background-color: #ffffff;
	.head{
		background-color: #ffffff;
		padding: 25rpx 35rpx;
		.sta_0{
			font-weight: bold;
			.txt{
				color: #00B689;
				margin-left: 10rpx;
			}
		}
		.sta_1{
			font-weight: bold;
			color: #618EEE;
		}
		.sta_2{
			font-weight: bold;
			color: #6D6D6D;
		}
		.item{
			display: flex;
			flex-direction: column;
			width: 680rpx;
			margin-top: 20rpx;
			.cover{
				width: 680rpx;
				height: 240rpx;
				border-radius: 15rpx;
				margin-bottom: 10rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 15rpx;
				}
			}
			.title{
				width: 680rpx;
				margin-bottom: 10rpx;
				font-weight: bold;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3; /* 控制显示的行数 */
				-webkit-box-orient: vertical;
			}
			.time{
				width: 680rpx;
				color: #6B6B6B;
				margin-bottom: 10rpx;
				
			}
			.num{
				width: 680rpx;
				color: #6B6B6B;
				margin-bottom: 10rpx;
			}
			.addr{
				width: 680rpx;
				color: #6B6B6B;
				margin-bottom: 20rpx;
			}
		}
		
	}
	.con{
		padding: 25rpx 35rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
		padding-bottom: 160rpx;
		.tab{
			width: 680rpx;
			display: flex;
			.label{
				width: 175rpx;
				height: 100rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.title{
					font-weight: bold;
					margin-bottom: 10rpx;
				}
				.line{
					width: 70rpx;
					border: 5rpx solid #00B689;
					// border-bottom: 5rpx solid #00B689;
					border-radius: 5rpx;
				}
			}
		}
		.info{
			.words{
				.txt{
					image{
						width: 680rpx;
						border-radius: 20rpx;
					}
				}
			}
			.rules{
				.txt{
					image{
						width: 680rpx;
						border-radius: 20rpx;
					}
				}
			}
		}
	}
	.foot{
		position: fixed;
		z-index: 3;
		bottom: 0;
		width: 100vw;
		background-color: #F6F8FC;
		.box{
			background-color: #ffffff;
			width: 100vw;
			height: 140rpx;
			margin-top: 20rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.btn_l{
				width: 295rpx;
				height: 60rpx;
				border: 1rpx solid #00B689;
				text-align: center;
				line-height: 60rpx;
				color: #00B689;
				border-radius: 50rpx;
				font-weight: bold;
			}
			.btn_r{
				width: 295rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				color: #ffffff;
				border-radius: 50rpx;
				background: linear-gradient(to right,#01E4BF,#0080DB);
			}
		}
	}
	@keyframes popup {
	  from {
	    height: 160rpx;
	  }
	  to {
	    height: 360rpx;
	  }
	}
	@keyframes popout {
	  from {
	    height: 360rpx;
	  }
	  to {
	    height: 160rpx;
	    opacity: 0;
	  }
	}	
	.share{
		position: fixed;
		bottom: 160rpx;
		height: 360rpx;
		width: 100vw;
		background-color: #ffffff;
		border-radius: 30rpx 30rpx 0 0; 
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		z-index: 3;
		.title {
			width: 100vw;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			border-bottom: 1rpx solid #eeeeee;
			margin-bottom: 60rpx;
		}
		.btn{
			display: flex;
			justify-content: center;
			align-items: center;
			.pic{
				width: 100rpx;
				height: 100rpx;
				margin-right: 50rpx;
				&:last-child{
					width: 110rpx;
					height: 110rpx;
				}
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		
		&.share-in {
		  animation: popup ease 1s;
		}
		&.share-out {
		  animation: popout ease-out 1s;
		  height: 0;
		}
	}
	.mask{
		position: fixed;
		z-index: 2;
		bottom: 0;
		width: 100vw;
		height: 100vh;
		background-color: #000000;
		opacity: 0.5;
	}
}	       
</style>
